<!-- 首页 -->
<template>
	<view class="home">
		<view class="home_box">
			<view class="home_top">
				<view class="title">首页</view>
			</view>
			<!-- 头部logo -->
			<view class="bg_image"></view>
			<view class="home_content">
				<!-- 搜索框 -->
				<view class="search">
					<image src="/static/img/common_ic_01.png"></image>
					<view @click="toPage(search_url)">
						<input type="text" placeholder="请输入商品名称" />
					</view>
				</view>
				<!-- 菜单 -->
				<view class="menu">
					<view class="menu_content">
						<view class="item" v-for="(item,index) in menu" :key="index" @click="toPage(item.url)">
							<image :src="item.img"></image>
							<span>{{ item.text }}</span>
						</view>
					</view>
				</view>
				<view class="seller" @click="toPage(shop_url)">
					<image class="seller_left" src="/static/img/banner-02.png"></image>
					<image class="seller_right" src="/static/img/banner-03.png"></image>
				</view>
				<!-- 商城大图 -->
				<view class="seller_big" @click="toPage(shop_url)">
					<image src="/static/img/banner-04.png"  ></image>
				</view>
				<!-- 商城公告 -->
				<view class="notice" @click="toPage(notice_url)">
					<view class="notice_name">商城公告</view>
					<view class="notice_span">最新商城夏日钜惠，满1000减80预购从速</view>
				</view>
				<!-- 特惠商家 -->
				<view class="shop">
					<view class="shop_top">
						<view class="top_name">特惠商家</view>
						<view class="tio_more" @click="toPage(shop_url)">更多</view>
					</view>
					<!-- 轮播图 -->
					<view class="banner">
						<banner-list :banners="base_info.bannerfoods" background="#FF504C" :heightFix="true">
						</banner-list>
					</view>
					<view class="shop_bottom">
						<view class="shop_content">
							<view class="item" v-for="(item,index) in sellers" :key="index" @click="toPage(item.url)">
								<image :src="item.img"></image>
								<view class="item_name">{{item.name}}</view>
								<span>{{item.span}}</span>
							</view>
						</view>
					</view>
				</view>
				<!-- 精选好物 -->
				<view class="goods_title">精选好物</view>
				<view class="goods">
					<goods-list :goods_data="goods"></goods-list>
				</view>
			</view>
		</view>
		<backtop :show_top="show_top"></backtop>
		<buttom-tabbar></buttom-tabbar>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	const goodsData = require("@/static/json/home/goods.json");
	const menu = require("@/static/json/home/menu.json");
	export default {
		components: {},
		computed: {
			// 获取vuex 数据
			...mapState({
				base_info: state => state.init.goods_detail.base_info, // banner信息 - 商品基本信息
				goods: state => state.init.goods,
				product: state => state.init.product,
			}),
		},
		watch: {},
		methods: {
			toPage(val) {
				uni.navigateTo({
					url: val
				})
			},
			//点击事件：
			backtop() {
				// 设置当前距离顶部距离为0；
				uni.pageScrollTo({
				    duration:500, // 毫秒
					scrollTop:0 // 位置
				});
			},
		},
		// 监听滚动高度
		onPageScroll(e) {
			this.scrollHight = e.scrollTop
			if (this.scrollHight >= this.safeArea) {
				this.show_top = true;
			} else {
				this.show_top = false;
			}
		},
		mounted() {},
		data() {
			return {
				safeArea: getApp().globalData.safeArea, // 胶囊的高度
				shop_url: "/pages/seller/index",
				notice_url: "/pages/seller/notice/index",
				show_top: false, // 显示top
				logo: "/static/img/white_logo.png", // 头部logo
				topLogo: "/static/img/logo.png", // 顶部logo
				search_url: "/pages/index/search/index", // 点击搜索框跳转链接
				// 轮播图
				// 通知，公告
				sellers: [{
						id: 0,
						img: "/static/img/q.png",
						name: "特惠商家",
						span: "免费吃不停",
					},
					{
						id: 1,
						img: "/static/img/q.png",
						name: "特惠商家",
						span: "免费吃不停",
					},
					{
						id: 2,
						img: "/static/img/q.png",
						name: "特惠商家",
						span: "免费吃不停",
					},
				],
				notice: [{
						id: 0,
						text: "感恩大回馈，千万积分大放送",
						time: "5分钟",
					},
					{
						id: 1,
						text: "屏南联社积分商城重装上线",
						time: "5分钟",
					},
				],
				// 实物商品兑换，优选特惠商家
				exchange: [{
						id: 0,
						text1: "实物商品兑换",
						text2: "积分兑豪礼",
						img: "/static/img/home_icon1.png",
						url: "/pages/gift_index/index"
					},
					{
						id: 1,
						text1: "优选特惠商家",
						text2: "免费吃不停",
						img: "/static/img/home_icon2.png",
						url: '/pages/seller_index/index'
					},
				],
				// 积分兑换物品
				active: 0, // 子组件tabbar active					
				tab_top: 0, // 子组件tabbar 距离顶部的距离
				tab: [{
						id: 0,
						label: "新品",
						value: "最新上架",
					},
					{
						id: 1,
						label: "热门",
						value: "狂欢疯抢",
					},
					{
						id: 2,
						label: "精选",
						value: "超值好物",
					},
				],
				// 菜单数据
				menu: menu,
				// 商品列表数据
				total_data: goodsData,
			};
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";

	.change {
		font-weight: 600;
		padding-bottom: 20rpx;
		position: relative;

		&:after {
			content: "";
			width: 32rpx;
			height: 8rpx;
			border-radius: 4rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: #ff504c;
		}
	}

	.home_input {
		margin-top: 100px;
	}
</style>
<style>
	page {
		padding-bottom: 0;
	}
</style>
